<template>
	<view>
		<!-- 顶部导航栏 -->
		<u-navbar is-back title="我的VIP" :bgColor="background" title-color="#fff" :border-bottom="false"
			back-icon-color="#fff">
		</u-navbar>
		<!-- 过渡 -->
		<view class="transition">
			<view class="transition-left">
				<image src="https://s1.ax1x.com/2022/07/27/vp6n1O.png" mode="" class="transition-left-image"></image>
				<text class="transition-left-text">5593人已开通会员</text>
			</view>
			<view class="transition-right">
				<text>购买查询</text>
			</view>
		</view>
		<!-- vip卡片 -->
		<view class="vip">
			<view class="vip-card">
				<image :src="userInfo.avatarUrl" mode="" class="vip-image" v-if="userInfo"></image>
				<image src="https://obohe.com/i/2022/07/27/yx03l1.jpg" mode="" class="vip-image" v-else></image>
				<view class="vip-text" v-if="isVip==false">
					<view class="first-tier">
						<view class="denglu">
							<text v-if="nickName">欢迎你，</text>
							<text v-else>立即登录</text>
						</view>
						<view class="huiyuan">
							会员
						</view>
					</view>
					<view class="second-tier">
						开通会员尊享VIP权利
					</view>
				</view>
				<view class="vip-text" v-else>
					<view class="first-tier">
						<view class="denglu vip_denglu">
							<text v-if="nickName">欢迎你，尊贵的VIP：</text>
							<text v-if="nickName"></text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 推荐 -->
		<view class="recommand">
			<view class="recommand-item">
				<text class="month">个月</text>
				<text class="current-price">￥</text>
				<text class="prv-price">￥</text>
			</view>
			<view class="recommand-icon">
				推荐
			</view>
		</view>
		<!-- 恭喜 -->
		<view class="congratulations">
			<image src="https://s1.ax1x.com/2022/07/27/vpcbon.png" mode="" class="congratulations-image"></image>
			<text class="congratulations-text">您获得2折开通会员特权</text>
		</view>
		<!-- button -->
		<view class="button">
			<u-popup v-model="show" mode="bottom">
				<view class="show-text">
					<text>开通VIP会员</text>
				</view>
				<view class="recommand">
					<view class="recommand-item">
						<text class="month">个月</text>
						<text class="current-price">￥</text>
						<text class="prv-price">￥</text>
					</view>
					<view class="recommand-icon ready-up">
						即将涨价
					</view>
				</view>
				<!-- 恭喜 -->
				<view class="congratulations">
					<image src="https://s1.ax1x.com/2022/07/27/vpcbon.png" mode="" class="congratulations-image">
					</image>
					<text class="congratulations-text">您获得2折开通会员特权</text>
				</view>
				<view class="buy-btn">
					<button type="default" @tap="openVip">立即购买</button>
				</view>
			</u-popup>
			<view v-if="isVip">
				<u-button @click="show = true">立即续费</u-button>
			</view>
			<view v-else>
				<u-button @click="show = true">立即开通</u-button>
			</view>
		</view>
		<!-- 间隔槽 -->
		<u-gap height="20" bg-color="#f5f5f5"></u-gap>
		<!-- VIP特权 -->
		<view class="special-right">
			<text class="special-right-title">VIP特权</text>
			<view class="special-item">
				<image src="https://s1.ax1x.com/2022/07/27/vpgJl8.png" mode="" class="special-image"></image>
				<view class="special-text">
					<text class="special-title">1000+精品名厨菜谱</text>
					<text class="special-subtitle">大咖教学，轻松学会</text>
				</view>
			</view>
			<view class="special-item">
				<image src="https://s1.ax1x.com/2022/07/27/vpgGSf.png" mode="" class="special-image"></image>
				<view class="special-text">
					<text class="special-title">每周上新</text>
					<text class="special-subtitle">新蔡持续更新中</text>
				</view>
			</view>
			<view class="special-item">
				<image src="https://s1.ax1x.com/2022/07/27/vpgY6S.png" mode="" class="special-image"></image>
				<view class="special-text">
					<text class="special-title">会员免广告打扰</text>
					<text class="special-subtitle">体验更流畅</text>
				</view>
			</view>
			<view class="special-item">
				<image src="https://s1.ax1x.com/2022/07/27/vpg3fP.png" mode="" class="special-image"></image>
				<view class="special-text">
					<text class="special-title">VIP尊贵身份标识</text>
					<text class="special-subtitle">随时随地、与众不同</text>
				</view>
			</view>
		</view>
		<!-- 间隔槽 -->
		<u-gap height="20" bg-color="#f5f5f5"></u-gap>
		<!-- 会员使用说明 -->
		<view class="statement">
			<text class="statement-title">会员使用说明</text>
			<view class="statement-container">
				<text>1.会员服务一经开通，不支持退款；</text>
				<text>2.如遇到苹果手机支付问题，建议参考Appstore支付流程；</text>
				<text>3.若会员开通出现异常，请立即联系客服，我们会在2个工作日内出处理结果</text>
				<text>4.会员常见问题、会员服务协议、会员隐私协议</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: '#313131',
				show: false,
				topupIndex: [],
				userInfo: null,
				myVip: "",
				salePrice: "",
				isVip: false,
				nickName: ""

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.transition {
		width: 100%;
		height: 100rpx;
		background-color: #313131;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.transition-left {
			display: flex;
			align-items: center;
			justify-content: space-around;
			width: 500rpx;
			height: 50rpx;
			background-color: #5c5c5c;
			border-top-right-radius: 25rpx;
			border-bottom-right-radius: 25rpx;

			.transition-left-image {
				width: 160rpx;
				height: 35rpx;
			}

			.transition-left-text {
				color: #fff;
			}
		}

		.transition-right {
			height: 35rpx;
			color: #fff;
			margin-right: 32rpx;
		}
	}

	.vip {
		width: 100%;
		padding: 0 32rpx;

		.vip-card {
			width: 680rpx;
			height: 300rpx;
			background-color: #fae4b3;
			margin-top: 28rpx;
			// background-image: url(../../static/myVip/vip-background.jpg);
			background-repeat: no-repeat;
			background-size: 220rpx 200rpx;
			background-position: 460rpx 100rpx;
			display: flex;

			.vip-image {
				width: 108rpx;
				height: 108rpx;
				border-radius: 50%;
				margin-top: 80rpx;
				margin-left: 32rpx;
				margin-right: 18rpx;
			}

			.vip-text {
				margin-top: 80rpx;

				.first-tier {
					display: flex;
					align-items: center;

					.denglu {
						font-size: 40rpx;
						color: #7b5b21;
						font-weight: bolder;
					}

					.huiyuan {
						background-color: #a5a5a5;
						color: #fae3b1;
						width: 106rpx;
						height: 32rpx;
						border-radius: 16rpx;
						text-align: center;
						line-height: 32rpx;
						margin-left: 8rpx;
						margin-top: 3rpx;
					}

					.vip_denglu {
						display: flex;
						flex-direction: column;
						font-size: 30rpx;
						margin-top: 15rpx;
					}
				}

				.second-tier {
					margin-top: 18rpx;
					color: #7b5b21;
				}
			}
		}
	}

	.recommand {
		padding: 0 32rpx;
		width: 100%;
		margin-top: 24rpx;
		display: flex;
		position: relative;

		.recommand-item {
			width: 212rpx;
			height: 232rpx;
			margin-right: 24rpx;
			border: 1rpx solid #e0e0e0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			&:last-child {
				margin-right: 0;
			}

			.month {
				font-size: 40rpx;
				font-weight: bold;
			}

			.current-price {
				color: #deb062;
				font-weight: bold;
				font-size: 45rpx;
			}

			.prv-price {
				color: #a49fa0;
				text-decoration: line-through;
				font-size: 35rpx;
				font-weight: bold;
			}
		}

		.active {
			background-color: #fbf7ef;
			border-color: #deb062;
		}

		.recommand-icon {
			width: 98rpx;
			height: 45rpx;
			background-color: #deb062;
			border-radius: 10rpx;
			text-align: center;
			line-height: 45rpx;
			color: #fff;
			position: absolute;
			top: -17rpx;
			left: 30rpx;
		}
	}

	.congratulations {
		display: flex;
		padding: 0 32rpx;
		margin-top: 26rpx;

		.congratulations-image {
			width: 65rpx;
			height: 35rpx;
			margin-right: 12rpx;
		}

		.congratulations-text {
			color: #7b5b21;
		}
	}

	.button {
		width: 100%;
		padding: 0 32rpx;
		margin-top: 34rpx;
		margin-bottom: 74rpx;

		.ready-up {
			background-color: #e64044;
			font-size: 22rpx;
		}

		.show-text {
			width: 100%;
			line-height: 80rpx;
			text-align: center;
		}

		.recommand {
			padding: 0 32rpx;
			width: 100%;
			margin-top: 24rpx;
			display: flex;
			position: relative;

			.recommand-item {
				width: 212rpx;
				height: 232rpx;
				margin-right: 24rpx;
				border: 1rpx solid #e0e0e0;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				&:last-child {
					margin-right: 0;
				}

				.month {
					font-size: 40rpx;
					font-weight: bold;
				}

				.current-price {
					color: #deb062;
					font-weight: bold;
					font-size: 45rpx;
				}

				.prv-price {
					color: #a49fa0;
					text-decoration: line-through;
					font-size: 35rpx;
					font-weight: bold;
				}
			}

			.active {
				background-color: #fbf7ef;
				border-color: #deb062;
			}

			.recommand-icon {
				width: 98rpx;
				height: 45rpx;
				background-color: #e64044;
				border-radius: 10rpx;
				text-align: center;
				line-height: 45rpx;
				color: #fff;
				position: absolute;
				top: -17rpx;
				left: 30rpx;
			}
		}


		.buy-btn {
			width: 100%;
			padding: 0 32rpx;
			margin-top: 42rpx;
		}

		.buy-btn>button {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			background-color: #fcf1d3;
			color: #a98c4f;
			font-weight: bold;
		}


	}

	.special-right {
		padding: 20rpx 32rpx 0;
		margin-bottom: 54rpx;

		.special-right-title {
			font-size: 44rpx;
			font-weight: bolder;
		}

		.special-item {
			display: flex;
			margin-top: 42rpx;
			align-items: center;
			margin-left: 46rpx;

			.special-image {
				width: 90rpx;
				height: 90rpx;
				margin-right: 44rpx;
			}

			.special-text {
				display: flex;
				flex-direction: column;

				.special-title {
					font-size: 35rpx;
					font-weight: bold;
					margin-bottom: 18rpx;
				}

				.special-subtitle {
					color: #aaa;
					font-size: 27rpx;
				}
			}
		}
	}

	.statement {
		padding: 20rpx 32rpx 0;
		margin-bottom: 52rpx;

		.statement-title {
			font-size: 40rpx;
			font-weight: bolder;
		}

		.statement-container {
			margin-top: 22rpx;
			display: flex;
			flex-direction: column;
			color: #aaa;
		}
	}
</style>
